<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    :bodyStyle="{ padding: '0 24px 10px' }"
    destroyOnClose
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-divider>列信息设置</a-divider>
      <a-transfer
        :data-source="mockData"
        :target-keys="targetKeys"
        :render="item => item.title"
        @change="handleChange"
        :listStyle="{ width: '47%',height: '400px' }"
        :titles="['可选项目','已选项目']"
      />
    </a-spin>
  </a-modal>
</template>

<script>
import { getAction } from '@api/manage';
  export default {
    name: "EmployeePayrollManagementTransfer",
    components: {
    },
    data () {
      return {
        title:"操作",
        width:800,
        visible: false,
        confirmLoading: false,
        mockData: [],
        targetKeys: [],
      }
    },
    created () {
      this.getOptions()
    },
    methods: {
      getOptions(){
        this.confirmLoading = true
        this.targetKeys = []
        getAction('/api/erp/hr/erpPayrollLedger/getPayrollManagementField').then(res => {
          console.log(res);
          if(res.success){
            this.mockData = Object.keys(res.result).map(v => {
              return {
                key: res.result[v],
                title: v,
              }
            })
          } else {
            this.$message.warning(res.message)
          }
          this.confirmLoading = false
        })
      },
      callBackClose () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        let obj = {}
        if(this.targetKeys.length == 0){
          this.$message.warning('至少选择一项')
        } else {
          this.targetKeys.forEach(item => {
            obj[item] = item
          })
          this.$emit('ok',obj);
          this.visible = false;
        }
      },
      handleCancel () {
        this.callBackClose()
      },
      handleChange(targetKeys, direction, moveKeys) {
        this.targetKeys = targetKeys;
      },
    }
  }
</script>

<style scoped>

</style>